<template>
	<view class="p12 pt0">
		<u-sticky>
			<view class="u-flex u-f-jsb bg-white pt16 pb16">
				<view class="user-info brs8 u-flex mr8 p6 h32" @click="toPage('/pages/community/my')">
					<u-avatar size="52" :src="userInfo.avatar"></u-avatar>
					<view class="u-line-1 fz12 u-font-bold ml4">{{userInfo.name || '请登录'}}</view>
				</view>
				<view class="p6 fz12 brs8 c9 module-search h32 u-flex u-f-justify">
					<u-icon name="search" size="28" class="mr3"></u-icon>搜索关键词
				</view>
			</view>
		</u-sticky>
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view @click="toInfo(item)" class="demo-warter pr6" v-for="(item, index) in leftList" :key="index">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.picUrl" :index="index"></u-lazy-load>
					<view class="pt10 pb16">
						<view class="fz14 u-font-bold u-line-2">{{item.title}}</view>
						<view class="u-flex u-f-jsb mt10">
							<view class="u-flex fz12 c9">
								<u-avatar class="mr5" size="42" :src="item.userAvatar"></u-avatar>
								{{item.userName}}
							</view>
							<view class="u-flex fz12 c9">
								<u-icon class="fz16 mr3" name="heart"></u-icon>
								{{item.likeCount || 0}}
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view @click="toInfo(item)" class="demo-warter pl6" v-for="(item, index) in rightList" :key="index">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.picUrl" :index="index"></u-lazy-load>
					<view class="pt10 pb16">
						<view class="fz14 u-font-bold u-line-2">{{item.title}}</view>
						<view class="u-flex u-f-jsb mt10">
							<view class="u-flex fz12 c9">
								<u-avatar class="mr5" size="42" :src="item.userAvatar"></u-avatar>
								{{item.userName}}
							</view>
							<view class="u-flex fz12 c9">
								<u-icon class="fz16 mr3" name="heart"></u-icon>
								{{item.likeCount || 0}}
							</view>
						</view>
					</view>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore :status="loadStatus" @loadmore="addRandomData"></u-loadmore>

		<u-tabbar active-color="#70B52C" @change="tabbarChange" v-model="curTab" :list="tabbarList"
			:mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curTab: 1,
				loadStatus: 'loadmore',
				flowList: [],
				isLogin: false,
				userInfo: {},
				list: []
			}
		},
		computed: {
			tabbarList() {
				return this.$store.state.tabbarList || '';
			},
		},
		onLoad() {
			this.initData();

			if (this.$db.get("userToken")) {
				this.$api.memberInfo({}, res => {
					if (res.code == 200) {
						this.isLogin = true
						this.userInfo = res.data;
					}
				})

			}
		},
		// 页面下拉到底部触发
		onReachBottom() {
			if (this.loadStatus == 'more') {
				this.getData()
			}
		},
		methods: {
			toInfo(item) {
				uni.navigateTo({
					url: '/pages/community/info?id=' + item.id
				})
			},


			initData() {
				this.page = 1
				this.flowList = []
				this.getData()

			},
			getData() {
				this.$api.communityList({
					pageNo: this.page,
					pageSize: 10,
				}, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.flowList = [...this.flowList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.flowList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			}
		}
	}
</script>

<style>
</style>

<style lang="scss" scoped>
	.user-info {
		width: 232rpx;
		background: rgba(25, 41, 28, 0.05);
	}

	.module-search {
		flex: 1;
		background: rgba(25, 41, 28, 0.05);
	}
</style>